import { data, Form, redirect, useActionData, useFetcher, useLocation, useNavigation, useRouteLoaderData } from "react-router";
import type { Route } from "./+types/login";


import { isLoggedIn, signin } from "./auth";


export async function clientLoader() {
    if (isLoggedIn()) {
        return redirect("/");
    }
    return null;
}

export async function clientAction({
    request,
}: Route.ActionArgs) {
    let formData = await request.formData();
    let username = formData.get("username") as string | null;
    let password = formData.get("password") as string | null;

    // Validate our form inputs and return validation errors via useActionData()
    if (!username) {
        return {
            error: "请输入用户名",
        };
    }
    if (!password) {
        return {
            error: "请输入密码",
        };
    }
    // Sign in and redirect to the proper destination if successful.
    try {
        await signin(username, password);
    } catch (error) {

        return {
            error: "登录失败"
        };
    }

    let redirectTo = formData.get("redirectTo") as string | null;
    return redirect(redirectTo || "/");
}

export default function Login() {

    let location = useLocation();
    let params = new URLSearchParams(location.search);
    let from = params.get("from") || "/";

    let navigation = useNavigation();
    let isLoggingIn = navigation.formData != null;

    let actionData = useActionData() as { error: string } | undefined;


    return (
        <div className="w-full max-w-sm  p-6 mx-auto bg-white rounded-lg shadow-md ">
            <div className="flex justify-center mx-auto">
                <img className="w-auto h-12" src="/logo.png" alt="" />
            </div>

            <Form method="post" replace>

                <input type="hidden" name="redirectTo" value={from} />
                <div>
                    <label className="block text-sm text-gray-800 ">用户名</label>
                    <input name="username" className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800   focus:border-blue-400  focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
                </div>

                <div className="mt-4">
                    <div className="flex items-center justify-between">
                        <label className="block text-sm text-gray-800 dark:text-gray-200">密码</label>
                        {/* <a href="#" className="text-xs text-gray-600 dark:text-gray-400 hover:underline">Forget Password?</a> */}
                    </div>

                    <input name="password" type="password" className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-lg  focus:border-blue-400  focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />



                </div>


                <div className="mt-6">
                    <button type='submit' disabled={isLoggingIn} className="w-full px-6 py-2.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
                        {isLoggingIn ? "登录中..." : "登录"}
                    </button>
                </div>

                {actionData && actionData.error ? (
                    <p className="text-red-500">{actionData.error}</p>
                ) : null}
            </Form>
        </div>
    );
}


